<template>
  <div class="DB-userInfo-container">
    <el-card class="app-container">
      <div>
        欢迎您,{{ this.userInfoData.username }}.今天是您在公司的第
        <span style="font-size: 20px; color: var(--themeColor)">{{ getDay }}</span>
        天，今天也要加油哦
        <i class="el-icon-medal" style="color: red"></i>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getDiffDay } from '@/utils/format_date'
export default {
  name: 'DB-userInfo',
  props: {
    userInfoData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {}
  },
  computed: {
    getDay() {
      return getDiffDay(this.userInfoData.timeOfEntry, new Date())
    },
  },
}
</script>

<style lang="less" scoped>
.app-container {
  background-color: #fff;
  border-radius: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
}
</style>
